<template>
	<view class="content">
		<up-sticky>
			<view class="header">
				<!-- #ifdef MP-WEIXIN -->
				<wxHeader
					:left="'100rpx'"
					:font_weight="'700'"
					:isBack="true"
					:isSearch="true"
					@search="search"
					:inputWidth="inputWidth"
					:color="'#fff'"
				></wxHeader>
				<!-- #endif -->
				<!-- #ifdef APP||H5 -->
				<view class="search">
					<up-icon name="arrow-left" size="32rpx" color="#fff" @click="back"></up-icon>
					<up-input
						color="#fff"
						class="input"
						border="none"
						placeholder="搜索"
						shape="circle"
						clearable
						customStyle="background:#717371"
						placeholderClass="placeholderClass"
						v-model.trim="searchContent"
						@confirm="search"
						prefixIconStyle="font-size: 22px;color: #fff"
						prefixIcon="search"
					></up-input>
				</view>
				<!-- #endif -->
				<!-- 	<up-icon name="arrow-left" size='30rpx' color="#fff" @click="back"></up-icon>
					<up-input class='input' border="none" placeholder="搜索" shape="circle" clearable
						customStyle="background:#fff;height: 72rpx;" placeholderClass="placeholderClass"
						v-model="searchContent" @confirm="search">
					</up-input> -->
				<!-- <text @click="search">搜索</text> -->
			</view>
		</up-sticky>
		<view class="box">
			<mescroll-uni
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
				:height="height + 'px'"
			>
				<view class="list">
					<view
						class="con"
						v-for="(item, index) in list"
						:key="index"
						@click="goUrl('/subPages/chaoshan/detail?item=' + JSON.stringify(item))"
					>
						<view class="img">
							<image
								:src="
									item.articleUrlType === 1
										? item.articleUrls[0]
										: item.videoCover
								"
								mode=""
							></image>
							<image
								v-if="item.articleUrlType === 2"
								src="http://112.124.50.179:8888/imgs/chaoshan/chaoshan_play.png"
								mode=""
								class="video_play"
							></image>
							<!-- <view class="fun_l">
								<image src="http://112.124.50.179:8888/imgs/chaoshan/pl.png" mode=""></image>
								<text>{{ item.commentNum }}</text>
							</view> -->
							<view
								class="fun_r"
								@click.native.stop="setPraise(item.id, item.praise)"
							>
								<image
									src="http://112.124.50.179:8888/imgs/chaoshan/zan.png"
									mode=""
									v-if="!item.praise"
								></image>
								<image
									src="http://112.124.50.179:8888/imgs/chaoshan/zan_check.png"
									mode=""
									v-else
								></image>
								<text>{{ item.praiseNum }}</text>
							</view>
						</view>
						<view class="txt">
							<view class="title">{{ item.articleTitle }}</view>
							<view class="text">{{ item.articleContent }}</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script setup>
import wxHeader from '@/components/self-wx-header/self-wx-header.vue';
import { reactive, onMounted, ref, getCurrentInstance } from 'vue';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { searchListApi, chaoshanPraiseApi } from '@/API/chaoshan/index.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
let list = ref([]);
let height = ref('0');
let navHeight = ref('0');
let searchContent = ref('');
let flag = ref(true);
let searchContentList = ref([]);
let inputWidth = ref(0);
onMounted(() => {
	navHeight.value = getApp().globalData.navHeight;
	uni.createSelectorQuery()
		.select('.header')
		.boundingClientRect((res) => {
			height.value =
				uni.getSystemInfoSync().windowHeight -
				uni.upx2px(24) -
				res.height -
				getApp().globalData.bottom;
		})
		.exec();
});

onLoad((o) => {
	searchContent.value = o.searchContent;
});

/**
 * 点赞/取消点赞
 */
const setPraise = async (id, praise) => {
	let res = await chaoshanPraiseApi({
		id: id,
		praise: praise === 1 ? 0 : 1
	});
	if (res.code === 0) {
		uni.showToast({
			title: praise == 0 ? '点赞成功' : '取消成功'
		});
		list.value.map((item) => {
			if (item.id === id) {
				item.praise = res.data.Praise;
				item.praiseNum = res.data.PraiseNum;
			}
		});
		console.log(list.value);
	}
};
const upCallback = async (mescroll) => {
	let rst = await searchListApi({
		pageIndex: mescroll.num,
		reqNum: mescroll.size,
		searchContent: searchContent.value
	});
	if (rst.data.code == 0) {
		const curPageData = rst.data.data.articleItems || []; // 当前页数据
		if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
		curPageData.forEach((ele) => {
			ele.articleUrls = ele.articleUrls.split(',');
		});
		list.value = list.value.concat(curPageData); //追加新数据
		mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
	} else {
		mescroll.endErr();
	}
};
const search = (e) => {
	searchContent.value = e;
	if (!searchContent.value.trim()) {
		uni.showToast({
			title: '请输入内容',
			icon: 'none'
		});
		return;
	}
	if (uni.getStorageSync('item').indexOf(searchContent.value) == -1) {
		searchContentList.value = uni.getStorageSync('item') || [];
		searchContentList.value.unshift(searchContent.value);
		uni.setStorageSync('item', searchContentList.value);
	}

	getMescroll().resetUpScroll();
};
const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
const back = () => {
	uni.navigateBack({
		delta: 1
	});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
}

.content {
	height: auto;
}

::v-deep.u-tabs__wrapper__nav__item__text {
	font-size: 36rpx !important;
}

.placeholderClass {
	color: #c5c5c5;
	font-size: 26rpx;
}

/* #ifdef H5||APP */
::v-deep.u-input__content {
	padding: 0 32rpx !important;
	height: 64rpx;
}

/* #endif */

.header {
	// height: 88rpx;
	width: 100%;
	padding-bottom: 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;

	.header_con {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.header_icon {
			display: flex;
			position: absolute;
			right: 0rpx;

			image {
				width: 56rpx;
				height: 56rpx;
				padding-left: 30rpx;
			}
		}
	}

	.search {
		display: flex;
		align-items: center;

		.input {
			margin: 0 32rpx;
		}

		text {
			color: #f3e0bb;
		}
	}
}

.box {
	overflow: auto;

	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.con {
			width: 48%;
			margin-bottom: 24rpx;
			background-color: #292b2a;
			color: #fff;
			border-radius: 10rpx;

			.img {
				height: 454rpx;
				position: relative;

				.video_play {
					position: absolute;
					z-index: 99;
					top: 8rpx;
					right: 8rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.fun_l,
				.fun_r {
					position: absolute;
					z-index: 99;
					display: flex;
					align-items: center;

					text {
						padding-left: 6rpx;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.fun_l {
					left: 16rpx;
					bottom: 16rpx;
				}

				.fun_r {
					right: 16rpx;
					bottom: 16rpx;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx 10rpx 0 0;
				}
			}

			.txt {
				padding: 16rpx;

				.title {
					// font-weight: bold;
					white-space: nowrap;
					/* 确保文本不会换行 */
					overflow: hidden;
					/* 隐藏超出容器的文本 */
					text-overflow: ellipsis;
					/* 当文本超出容器时显示省略号 */
				}

				.text {
					padding-top: 8rpx;
					font-size: 24rpx;
					white-space: pre-wrap;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				// .foot {
				// 	display: flex;
				// 	justify-content: space-between;

				// 	view {
				// 		display: flex;
				// 		align-items: center;
				// 		font-size: 24rpx;

				// 		text {
				// 			padding-left: 6rpx;
				// 		}
				// 	}
				// }
			}
		}
	}
}
</style>
